<html>
<head>

<script type="text/javascript">

  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('text1').addEventListener('focus',tomarfoco1,false);
    document.getElementById('text2').addEventListener('focus',tomarfoco2,false);
    document.getElementById('text1').addEventListener('blur',perderfoco1,false);
    document.getElementById('text2').addEventListener('blur',perderfoco2,false);
  }

  function tomarfoco1()
  {
    document.getElementById('text1').style.backgroundColor='#ff0000';
  }

  function tomarfoco2()
  {
    document.getElementById('text2').style.backgroundColor='#ff0000';
  }

  function perderfoco1()
  {
    document.getElementById('text1').style.backgroundColor='#000000';
  }

  function perderfoco2()
  {
    document.getElementById('text2').style.backgroundColor='#000000';
  }

</script>

</head>
<body>

<input type="text" id="text1" name="text1" size="30">
<br>
<input type="text" id="text2" name="text2" size="30">

</body>
</html>x 